<template>
  <ViewBox class="view-box-class">
    <div class="header-box">
      <el-button type="primary" class="btn1" @click="toLogin">模拟登录</el-button>
      <el-button type="danger" class="btn2" @click="toLogout">模拟登出</el-button>
      <div class="select-box">
        <span class="theme-title">切换主题: </span>
        <el-select class="theme-select" placeholder="Select" v-model="theme">
          <el-option v-for="val in themeOptions" :key="val" :label="val" :value="val" />
        </el-select>
      </div>
    </div>

    <SCodeNote
      class="code-outsize"
      width="calc(100% - 40px)"
      height="calc(100% - 92px)"
      language="javascript"
      editable
      :foldable="true"
      :unfold="true"
      :codes="code"
      :foldContent="{
        fold: 'fold',
        unfold: 'unfold note',
      }"
      :showLineNumber="true"
      :theme="theme"
      @submit="toSubmit"
    />
  </ViewBox>
</template>

<script lang="ts" setup>
import { ViewBox } from '@/components'
import { SCodeNote, initCodeNoteConfig, allThemes } from '@sediment/libs'
import { CodeNoteTheme } from '@sediment/libs'
import { useCodeNoteStore } from '@/store'
import { ElMessage } from 'element-plus'

const { getCode, login, submit } = useCodeNoteStore()

// 应该在main.ts里面在app.mount()方法调用之前调用初始化<s-code-note>组件的方法initCodeNoteConfig()
// 这里是demo演示, 所以就直接写这里了
initCodeNoteConfig({
  theme: 'tomorrow',
  permissions: {
    add: (next: Function) => {
      if (isLogin.value) {
        next()
      } else {
        ElMessage.warning('没有权限, 请登录获取权限!')
      }
    },
    edit: (next: Function) => {
      if (isLogin.value) {
        next()
      } else {
        ElMessage.warning('没有权限, 请登录获取权限!')
      }
    },
    remove: (next: Function) => {
      if (isLogin.value) {
        next()
      } else {
        ElMessage.warning('没有权限, 请登录获取权限!')
      }
    },
    submit: (next: Function) => {
      if (isLogin.value) {
        next()
      } else {
        ElMessage.warning('没有权限, 请登录获取权限!')
      }
    },
  },
  popContent: {
    content: '',
    okText: '',
    cancelText: '',
  },
  languages: ['Markup', 'CSS', 'C-like', 'JavaScript', 'ABAP', 'ABNF', 'ActionScript', 'Ada', 'Agda', 'AL', 'ANTLR4', 'Apache Configuration', 'Apex', 'APL', 'AppleScript', 'AQL', 'Arduino', 'ARFF', 'ARM Assembly', 'Arturo', 'AsciiDoc', 'ASP.NET (C#)', '6502 Assembly', 'Atmel AVR Assembly', 'AutoHotkey', 'AutoIt', 'AviSynth', 'Avro IDL', 'AWK', 'Bash', 'BASIC', 'Batch', 'BBcode', 'BBj', 'Bicep', 'Birb', 'Bison', 'BNF', 'BQN', 'Brainfuck', 'BrightScript', 'Bro', 'BSL (1C:Enterprise)', 'C', 'C#', 'C++', 'CFScript', 'ChaiScript', 'CIL', 'Cilk/C', 'Cilk/C++', 'Clojure', 'CMake', 'COBOL', 'CoffeeScript', 'Concurnas', 'Content-Security-Policy', 'Cooklang', 'Coq', 'Crystal', 'CSS Extras', 'CSV', 'CUE', 'Cypher', 'D', 'Dart', 'DataWeave', 'DAX', 'Dhall', 'Diff', 'Django/Jinja2', 'DNS zone file', 'Docker', 'DOT (Graphviz)', 'EBNF', 'EditorConfig', 'Eiffel', 'EJS', 'Elixir', 'Elm', 'Embedded Lua templating', 'ERB', 'Erlang', 'Excel Formula', 'F#', 'Factor', 'False', 'Firestore security rules', 'Flow', 'Fortran', 'FreeMarker Template Language', 'GameMaker Language', 'GAP (CAS)', 'G-code', 'GDScript', 'GEDCOM', 'gettext', 'Gherkin', 'Git', 'GLSL'],
})

const code = ref<Record<string, any>[] | string | Record<string, any>>([])
const isLogin = ref<boolean>(false)
const theme = ref<CodeNoteTheme>('tomorrow')

const themeOptions = allThemes()

getCode().then(res => { // 模拟接口-获取code数据
  code.value = res
})

const toLogin = () => {
  login(true).then(res => { // 模拟接口-登录
    if (res) {
      isLogin.value = true
      ElMessage.success('已登录!')
    }
  })
}
const toLogout = () => { // 模拟接口-登出
  login(false).then(res => { // 模拟接口-登录
    if (res) {
      isLogin.value = false
      ElMessage.success('已登出!')
    }
  })
}

const toSubmit = ({data, initState}) => {
  submit(data).then(res => { // 模拟提交数据到数据库
    if (res) {
      getCode().then(_res => { // 重新获取code数据
        initState()
        code.value = _res
      })
    }
  })
}

</script>

<style lang="less" scoped>
.header-box {
  height: 32px;
  margin: 20px 0;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btn1 {
    margin-left: 20px;
  }
  .btn2 {
    margin-left: 20px;
  }
  .select-box {
    margin-left: auto;
    margin-right: 20px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    .theme-title {
      margin-right: 10px;
    }
    .theme-select {
      width: 140px
    }
  }
}
.code-outsize {
  margin: 0 20px;
}
</style>